<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<link rel="stylesheet" href="__PUBLIC__/Invitation/css/left.css">
	<style>
		*{
			margin:0;
			padding:0;
		}
		body{
			margin:0;
			font-family:Arial,Helvetica,sans-serif;
			font-size:13px;
			line-height:1.5;
		}
		.device{
			width:320px;
			position:relative;
			/*margin-top:10%;*/
			height:314px;
			/*padding:30px 40px;*/
			/*border-radius:20px;*/
			/*background:#000;*/
			/*border:3px solid #fff;*/
			/*box-shadow:0px 0px 5px #000;*/
		}
		.swiper-container{
			width:660px;
			height:314px;
			color:#fff;
			/*background:#222;*/
			/*text-align:center;*/
		}
		.swiper-slide{
			height:100%;
			opacity:0.4;
			width: 220px;
			height: 150px;
			-webkit-transition:300ms;
			-moz-transition:300ms;
			-ms-transition:300ms;
			-o-transition:300ms;
			transition:300ms;
			-webkit-transform:scale(0);
			-moz-transform:scale(0);
			-ms-transform:scale(0);
			-o-transform:scale(0);
			transform:scale(0);
		}
		.swiper-slide-visible{
			opacity:0.5;
			-webkit-transform:scale(0.8);
			-moz-transform:scale(0.8);
			-ms-transform:scale(0.8);
			-o-transform:scale(0.8);
			transform:scale(0.8);
		}
		.swiper-slide-active{
			top:0;
			opacity:1;
			-webkit-transform:scale(1);
			-moz-transform:scale(1);
			-ms-transform:scale(1);
			-o-transform:scale(1);
			transform:scale(1);
		}
		.red-slide{
			background:#fff;
		}
		/*.blue-slide{
			background:#fff;
		}*/
		.orange-slide{
			background:#fff;
		}
		.green-slide{
			background:#fff;
		}
		.pink-slide{
			background:#fff;
		}
		.swiper-slide .title{
			width: 220px;
			height: 150px;
			background: #fff;
		}
		/*.pagination{
			position:absolute;
			z-index:20;
			left:18px;
			width:100%;
			text-align:center;
			bottom:120px;
		}*/
	/*	.swiper-pagination-switch{
			display:inline-block;
			width:10px;
			height:10px;
			border-radius:8px;
			background:#aaa;
			margin-right:8px;
			cursor:pointer;
			-webkit-transition:300ms;
			-moz-transition:300ms;
			-ms-transition:300ms;
			-o-transition:300ms;
			transition:300ms;
			opacity:0;
			position:relative;
			top:-50px;
		}*/
		.swiper-visible-switch{
			opacity:1;
			top:0;
			background:#aaa;
		}
		.swiper-active-switch{
			background:#fff;
		}
		.swiper-wrapper{
			margin-left: -174px;
		}
		.imgbfa{
			width: 100%;
		}
		.imgpad{
			padding:6px;
		}
		.img_font h4{
			color: #3a91b4;
			font-weight: lighter;
			font-size: 16px;
			letter-spacing: 1px;
		}
		.img_font span{
			color: #3a91b4;
			font-weight: lighter;
			font-size: 32px;
			letter-spacing: 1px;
			font-weight:bold;
			margin-right: 10px;
		}
		.img_font p{
			color: #4b566a;
			font-weight: lighter;
			font-size: 13px;
			letter-spacing: 1px;
			width: 100%;
			line-height: 22px;position: fixed;
		}
		
	</style>
</head>
<body>
	<div class="device">
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div id="lefea" class="swiper-slide blue-slide">
					<div class="title imgpad">
						<img class="imgbfa" src="__PUBLIC__/Invitation/images/a.jpg" alt="">
					</div>
					<div class="img_font" style="width:110%;
					margin-top:14px;margin-left: -4%;padding: 0 12px;background:#e7e9f1;">
						<h4>YEARS</h4>
						<p><span>2005</span>智联招聘与央视经济频道联合开展了“CCTV年度雇主调查活动”，率先将“雇主品牌”概念从专业领域引入大众传播平台。</p>
					</div>
				</div>
				<div id="lefeb" class="swiper-slide blue-slide">
					<div class="title imgpad">
						<img class="imgbfa" src="__PUBLIC__/Invitation/images/b.jpg" alt="">
					</div>
					<div class="img_font" style="width:110%;
					margin-top:14px;margin-left: -4%;padding: 0 12px;background:#e7e9f1;">
						<h4>YEARS</h4>
						<p><span>2011</span>活动从实用性出发，发布了基于对超过35000份全国适龄职场人的网络调研结果分析的多份调研报告，从多个不同角度解析了职场人对“好工作”的最新洞察，为企业建设雇主品牌战略提供参考依据。</p>
					</div>
				</div>
				<div id="lefec" class="swiper-slide blue-slide">
					<div class="title imgpad">
						<img class="imgbfa" src="__PUBLIC__/Invitation/images/c.jpg" alt="">
					</div>
					<div class="img_font" style="width:110%;
					margin-top:14px;margin-left: -4%;padding: 0 12px;background:#e7e9f1;">
						<h4>YEARS</h4>
						<p><span>2012</span>28个城市的1554家雇主报名参选，同比2011年增长超三成。同时，报名参选的中小企业占全部企业的比例达到57%，雇主品牌传播初见成效。年度十强更是首次荣登纽约时代广场，成为世界的焦点。</p>
					</div>
				</div>
				<div id="lefed" class="swiper-slide blue-slide">
					<div class="title imgpad">
						<img class="imgbfa" src="__PUBLIC__/Invitation/images/d.jpg" alt="">
					</div>
					<div class="img_font" style="width:110%;
					margin-top:14px;margin-left: -4%;padding: 0 12px;background:#e7e9f1;">
						<h4>YEARS</h4>
						<p><span>2013</span>颁奖盛典从北京移师三亚，评选增加中小企业的奖项推动中小企业雇主品牌建设。智联招聘CEO郭盛发布的报告首次在行业内使用网络招聘大数据，解析劳动力市场与宏观经济相互印证的关系。活动已从单纯评奖升华为行业输出干货的盛会。</p>
					</div>
				</div>
			</div>
		</div>
		<div class="pagination"></div>
	</div>
</body>
<script src="__PUBLIC__/Invitation/js/jquery-1.10.1.min.js"></script>
<script src="__PUBLIC__/Invitation/js/idangerous.swiper.js"></script>
<script>
  	var mySwiper = new Swiper('.swiper-container',{
	    pagination: '.pagination',
	    paginationClickable: true,
	    centeredSlides: true,
	    slidesPerView: 3,
	    watchActiveIndex: true
 	})
</script>
</html>